

<template>
  <div class="food-route-planning">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">以下是您选择的,路线及途径美食:</div>
          </div>
          <div class="category-list">
            <div>{{tourRoute}}</div>
            <div>{{foodRoute}}</div>
<!--            路线一:从太原东山地区出发,经东峰路,长风东街、长风西街、新晋祠路到达晋祠,这条路线距离相对较远，从城市的东边绕到西边,全程约30公里,根据路况行驶时间可能在!小时左右。美食:东峰路附近,选择位于小店区东峰路与南中环东街交叉路口往北约170米的李家大院铁锅炖,王妃烤鱼,周边还有川厨荟火锅烧烤、洋洋螺蛳粉。肥汁米线、飞哥面馆(大盘鸡)等。-->
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="main-content">
          <div class="timer">
            <div class="input-tip-title">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">住宿规划</div>
            </div>
            <div class="category-list">
              <el-form ref="formRefOne" label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item label="入住日期" style="margin-bottom: 10px" prop="checkinDate">
                  <el-date-picker
                      @change="changeSelect"
                      v-model="formInline.scheduledDateList"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择">
                  </el-date-picker>
<!--                  <el-date-picker-->
<!--                      @change="changeSelect"-->
<!--                      v-model="formInline.checkinDate"-->
<!--                      type="date"-->
<!--                      value-format="YYYY-MM-DD HH:mm:ss"-->
<!--                      placeholder="请选择">-->
<!--                  </el-date-picker>-->
                </el-form-item>
                <el-form-item label="住宿类型" style="margin-bottom: 10px" prop="lodgingType">
                  <el-select @change="changeSelect" v-model="formInline.lodgingType" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in lodgingTypeList"
                        :key="index"
                        :label="item.name"
                        :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="星级选择" style="margin-bottom: 10px" prop="starLevel">
                  <el-select @change="changeSelect" v-model="formInline.starLevel" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in starLevelList"
                        :key="index"
                        :label="item.name"
                        :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="入住房型" prop="roomType">
                  <el-select @change="changeSelect" v-model="formInline.roomType" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in roomTypeList"
                        :key="index"
                        :label="item.name"
                        :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="房间价格" prop="roomPrice">
                  <el-select @change="changeSelect" v-model="formInline.roomPrice" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in roomPriceList"
                        :key="index"
                        :label="item.price"
                        :value="item.price">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="总人数" prop="totalNum">
                  <el-input @change="changeSelect" @focus="numberFocus" v-model="formInline.totalNum" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>

            </div>
            <!--            总人数选填-->
            <div class="total-number" v-if="isShowTotalNumber">
              <div class="total-number-container">
                <el-form ref="formRefTwo"  style="margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">

                  <el-form-item label="成人人数" style="margin-right: 5px;" prop="numberOfAdults">
                    <el-input @change="changeSelect" @blur="numberBlur" style="width: 188px" v-model="formInline.numberOfAdults" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="老人人数" style="margin-right: 5px;" prop="numberOfElderly">
                    <el-input @change="changeSelect" @blur="numberBlur" style="width: 188px" v-model="formInline.numberOfElderly" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="小孩人数" style="margin-right: 5px;" prop="numberOfChild">
                    <el-input @change="changeSelect" @blur="numberBlur" style="width: 188px" v-model="formInline.numberOfChild" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="小孩年龄" style="margin-right: 0px;" prop="ageOfChild">
                    <el-input @change="changeSelect" style="width: 188px" v-model="formInline.ageOfChild" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-form>

              </div>
            </div>
          </div>
          <div class="timer">
            <div class="input-tip-title entourage-list">
              <div style="display: flex;align-items:  center; ">
                <div class="tip">
                  <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
                </div>
                <div class="title">交通规划</div>
              </div>
            </div>
            <div class="category-list">
              <div @click="transportClick(item,index)" :class="currentTransport===index?'active-category-list-item':'category-list-item'"  v-for="(item,index) in transportationPlanning">
                <div class="category-list-item-title">
                  {{item.name}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="query-button-groups">
          <div class="btn-box" @click="goRegister">
            <div class="login-btn">
              确 定
            </div>
          </div>
          <div class="btn-box right-btn" @click="goAI">
            <div class="login-btn">
              AI智能生成
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <IntelligentlyGeneratedAI :label="intelligentlyLabel" :isTourist="isTouristType"
                            :typeRoute="PREDICT_STATUS.TransportationAccommodationPlanning"
                            :aiDataList="currentNavigationList"
                            @nextPageRoute="nextPageRoute" v-if="currentNavigation"/>
</template>
<script setup>
import api from "@/service/TouristHomepage";
import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {reactive, ref} from "vue";
import {PREDICT_STATUS} from "@/utils/consts";
import {useTouristHomepageStore} from "@/store/touristHomepage";
const $emit = defineEmits(['nextPageRoute'])
const intelligentlyLabel=ref('以下为路线一途径的酒店,请选择适合您的酒店:');
const formInline=reactive({
  checkinDate: '',
  checkinEndDate:'',
  lodgingType: '',
  starLevel:'',
  roomType:'',
  roomPrice:'',
  travelType:'',
  numberOfAdults:'',
  numberOfElderly:'',
  numberOfChild:'',
  ageOfChild:'',
  totalNum:'',
  scheduledDateList:[]
})
const lodgingTypeList=ref([
  {
    name:'酒店',
    price:'10',
    distance:'10'
  },
  {
    name:'民宿',
    price:'10',
    distance:'10'
  },
  {
    name:'酒店',
    price:'10',
    distance:'10'
  },


]);
const currentTransport=ref(-1);
const transportationPlanning=ref([
  {
    name:'打车/自驾',
    price:'10',
    distance:'10'
  },
  {
    name:'地铁',
    price:'10',
    distance:'10'
  },
  {
    name:'公交',
    price:'10',
    distance:'10'
  },


]);
const starLevelList=ref([
  {
    name:'五星级',
    price:'10',
    distance:'10'
  },
  {
    name:'四星级',
    price:'10',
    distance:'10'
  },
  {
    name:'三星级',
    price:'10',
    distance:'10'
  },
  {
    name:'二星级',
    price:'10',
    distance:'10'
  },
  {
    name:'一星级',
    price:'10',
    distance:'10'
  },
])
const roomTypeList=ref([
  {
    name:'大床房',
    price:'10',
    distance:'10'
  },
  {
    name:'标准间',
    price:'10',
    distance:'10'
  },
  {
    name:'商务间',
    price:'10',
    distance:'10'
  },
  {
    name:'Executor房',
    price:'10',
    distance:'10'
  },
  {
    name:'Executor房',
    price:'10',
    distance:'10'
  }
])
const roomPriceList=ref([
  {
    name:'大床房',
    price:'1000',
    distance:'10'
  },
  {
    name:'标准间',
    price:'800',
    distance:'10'
  },
  {
    name:'商务间',
    price:'700',
    distance:'10'
  },
])
const isTouristType=ref(true);
function transportClick(data,index){
  currentTransport.value=index;
  changeSelect()
}
const isShowTotalNumber=ref(false);
function numberFocus(){
  isShowTotalNumber.value=true;
}
function numberBlur(){
let totalNumber=Number(formInline.numberOfAdults)+Number(formInline.numberOfElderly)+Number(formInline.numberOfChild);
  formInline.totalNum=Number(totalNumber);
}
function goRegister(){
  formInline.checkinDate= formInline.scheduledDateList[0];
  formInline.checkinEndDate= formInline.scheduledDateList[1];
  if(Number(currentTransport.value)>-1){
    formInline.travelType=transportationPlanning.value[currentTransport.value].name;
  }
  createOrUpdateAccommodationApi()
}
function createOrUpdateAccommodationApi(){
  api.createOrUpdateAccommodation(formInline).then(res=>{
  })
}
const currentNavigationList=ref([]);
function goAI(){
  currentNavigation.value=true;
  useTouristHomepageStore().setTouristClearStatus(false)
  if(Number(currentTransport.value)>-1){
    formInline.travelType=transportationPlanning.value[currentTransport.value].name;
  }
  formInline.checkinDate= formInline.scheduledDateList[0];
  formInline.checkinEndDate= formInline.scheduledDateList[1];
  formInline.foodTourRouteParam= useTouristHomepageStore().setTouristAiDataFoodRoute;
  formInline.tourRouteParam= useTouristHomepageStore().setTouristAiDataTourRoute;
  api.getTravelAccommodationList(formInline).then((res) => {
    console.log("交通路线规划AI智能生成---",  res)
    currentNavigationList.value=res.data.answers;

  })
}
function nextPageRoute(data){
  console.log('data',data)
//
  $emit('nextPageRoute',data)

}
const currentNavigation=ref(false);
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    currentNavigation.value=false;
    resetForm()
  }
})
// 定义表单引用
const formRefOne = ref();
const formRefTwo = ref();
//重置表单
const resetForm = () => {
  formRefOne.value.resetFields();
  if(isShowTotalNumber.value){
    formRefTwo.value.resetFields();

  }
  currentTransport.value=-1;

};
function changeSelect(){
  useTouristHomepageStore().setTouristClearStatus(false)
}
// 计算属性
const tourRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataTourRoute || '';

})
const foodRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataFoodRoute || '';

})
onMounted(() => {
})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
.food-route-planning{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 122px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;

          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 381px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .main-content{
        height: 85%;
        overflow-y: auto;
        .timer{
          border-bottom: 1px solid #EBD7C5;
          .entourage-list{
            justify-content: space-between;
            width:100%;
          }
          .input-tip-title{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .title{
              height: 16px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 16px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
          .category-list{
            display: flex;
            margin-top: 16px;
            //  换行
            flex-wrap: wrap;
            margin-bottom: 10px;
            .category-list-item{
              cursor: pointer;
              margin-left: 8px;
              font-weight: 400;
              font-size: 14px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
              font-family: DingliesongtypefaceRegular;
              height: 22px;
              background: #F5ECE2;
              border-radius: 6px 6px 6px 6px;
              line-height: 22px;
              .category-list-item-title{
                padding: 0 5px;
              }
            }
            .active-category-list-item{
              cursor: pointer;
              margin-left: 8px;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
              text-align: left;
              font-style: normal;
              text-transform: none;
              font-family: DingliesongtypefaceRegular;
              height: 22px;
              background: #9B6548;
              border-radius: 6px 6px 6px 6px;
              line-height: 22px;
              .category-list-item-title{
                padding: 0 5px;
              }
            }


          }
          .total-number{
            margin-bottom: 14px;
            width: 1184px;
            height: 65px;
            //background: #F5ECE2;
            border-radius: 0px 0px 0px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            .total-number-container{
              width: 1084px;
              height: 65px;
              background: #F5ECE2;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              border: 1px solid rgba(214,174,135,0.6);
              :deep(.el-form-item__content){
                width: 188px !important;
              }
            }
          }
        }
      }

      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
</style>
<style>
@import "@/assets/main.scss";
</style>